﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5流程图拖拽定义JS插件</title>
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="diagramflow.js"></script>
</head>
<body>
    
 
    <div style="position:relative;width:800px;height:500px">
        <canvas id="myCanvas" width="1000" height="800" tabindex="1"></canvas>
    </div>
    <div id="divSelectedNode"></div>

    <script>
        var Figures = {
            Rectangle: function (ctx, node) {
                ctx.beginPath();
                ctx.fillStyle = node.fillStyle;
                ctx.strokeStyle = "blue";
                ctx.fillRect(node.x, node.y, node.w, node.h);
                ctx.fillStyle = "black";
                ctx.font = "10px Verdana";
                ctx.textBaseline = "top";
                node.textfill(ctx);
            },
            Circle: function (ctx, node) {
                ctx.beginPath();
                ctx.fillStyle = node.fillStyle;
                ctx.ellipse(node.x + node.w / 2, node.y + node.h / 2, node.w / 2, node.h / 2, 0, 0, 2 * Math.PI);
                ctx.fill();
                node.textfill(ctx);
            },
            Diamond: function (ctx, node) {
                ctx.beginPath();
                ctx.fillStyle = node.fillStyle;
                ctx.moveTo(node.x, node.y + node.h / 2);
                ctx.lineTo(node.x + node.w / 2, node.y);
                ctx.lineTo(node.x + node.w, node.y + node.h / 2);
                ctx.lineTo(node.x + node.w / 2, node.y + node.h);
                ctx.fill();
                node.textfill(ctx);
            }
        }

        var anchors = model.defaultAnchors("Rectangle");
        model.addNode(new model.node(10, 10, 100, 100, anchors, "一个正方形，点击可以编辑", "green", "Rectangle"));
        anchors = model.defaultAnchors("Circle");
        model.addNode(new model.node(30, 140, 100, 100, anchors, "一个圆形，点击可以编辑和拖拽", "white", "Circle"));
        model.addNode(new model.node(40, 140, 100, 100, anchors, "一个圆形，点击可以编辑和拖拽", "white", "Circle"));
        anchors = model.defaultAnchors("Rectangle");
        model.addNode(new model.node(250, 80, 150, 150, anchors, "一个菱形，点击可以编辑和拖拽.", "yellow", "Diamond"));
        model.addNode(new model.node(350, 250, 150, 100, anchors, "一个长方形，点击可以编辑和拖拽", "Cyan", "Rectangle"));

        model.addLink(new model.link(1, 2, 7, 3, "双击可以编辑"));
     
        model.addLink(new model.link(2, 3, 1, 1, "链接 2"));

        model.init("myCanvas");
        model.draw();

       
        document.addEventListener("selectionChanged", function (e) {
            document.all("divSelectedNode").innerText = "Selected node:" + e.detail;
        });

    </script>
    
</body>
</html>
